{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '其他插件:example/other/index', '图标选择插件'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">图标选择插件 fontIconPicker</div>
        </header>
        <div class="card-body">
        
          <p>选择后可直接获取选择后的值。例如：<code>$("#icon-example").val();</code></p>
        <p class="text-danger"><strong>该示例ajax引入v5对应的图标json。</strong></p>
        <input type="text" id="icon-example" name="icon-example" />
        <span id="show-mdi"></span>
        
        </div>
      </div>
  </div>

</div>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        var font_element = $('#icon-example').fontIconPicker({
            theme: 'fip-bootstrap'
        });
        
        $.ajax({
            url: "{:url('example/other/data')}",
            type: 'GET',
            dataType: 'json'
        }).done(function(response) {
     
            var fontello_json_icons = [];
     
            $.each(response.glyphs, function(i, v) {
                fontello_json_icons.push( v.css );
            });
     
            font_element.setIcons(fontello_json_icons);
        }).fail(function() {
            console.error('字体图标配置加载失败');
        });
        
        $(document).on('change', '#icon-example', function(){
            $('#show-mdi').html($(this).val());
        });
    });
    </script>